<template>
  <div :class="$style.addOrEdit">
    <Button :type="type" @click="visible=true">{{ label }}</Button>
    <el-dialog :visible.sync="visible" :title="title" :close-on-click-modal="false" @closed="closedHandle" @open="openHandle">
      <FormContainer :column="1">
        <el-form ref="form" :model="formData" :rules="formRules" label-width="90px">
          <el-form-item prop="indexName" label="评价内容描述">
            <el-input v-model="formData.indexName" placeholder="请输入评价内容描述" clearable></el-input>
          </el-form-item>
          <el-form-item prop="orderNumber" label="排序">
            <el-input v-model="formData.orderNumber" v-number-input placeholder="请输入排序号" clearable></el-input>
          </el-form-item>
          <!-- <el-form-item prop="state" label="启用状态">
            <el-radio-group v-model="formData.state">
              <el-radio :label="1">启用</el-radio>
              <el-radio :label="0">停用</el-radio>
            </el-radio-group>
          </el-form-item> -->
          <el-form-item>
            <Button type="primary" @click="cancelHandle">取消</Button>
            <Button type="primary" @click="confirmHandle">确定</Button>
          </el-form-item>
        </el-form>
      </FormContainer>
    </el-dialog>
  </div>
</template>
<script>
import FormContainer from '@/components/FormContainer'
import { addAppraiseIndex, editAppraiseIndex } from '@/api/serviceQuality'
export default {
  name: 'AddOrEdit',
  components: {
    FormContainer
  },
  props: {
    type: {
      type: String,
      default: 'primary'
    },
    label: {
      type: String,
      default: '新增'
    },
    title: {
      type: String,
      default: '新增'
    },
    row: {
      type: Object,
      default: undefined
    }
  },
  data() {
    const validatorIndexName = (r, v, c) => {
      if (v.length > 6) {
        c(new Error('最多6个字符'))
      } else {
        c()
      }
    }
    return {
      visible: false,
      formData: {
        indexName: '',
        orderNumber: '',
        state: 1
      },
      formRules: {
        indexName: [{ required: true, message: '请输入评价内容描述', trigger: 'change' },
          { required: true, validator: validatorIndexName, trigger: 'change' }],
        state: [{ required: true, message: '请选择启用状态', trigger: 'change' }]
      }
    }
  },
  methods: {
    openHandle() {
      if (this.row !== undefined) {
        for (const [key, value] of Object.entries(this.row)) {
          this.$set(this.formData, key, value)
        }
      }
    },
    closedHandle() {
      this.$refs.form.resetFields()
    },
    cancelHandle() {
      this.visible = false
    },
    confirmHandle() {
      return this.$refs.form.validate().then(() => {
        let ajax = editAppraiseIndex
        if (this.row === undefined) {
          ajax = addAppraiseIndex
        }
        return ajax(this.formData).then(res => {
          this.$message.success('操作成功！')
          this.visible = false
          this.$emit('refresh')
        })
      })
    }
  }
}
</script>
<style lang="scss" module>
.addOrEdit{
  display: inline-block;
  text-align: left;
  margin:0 10px;
  & span{
    display: inline-block !important;
  }
}
</style>
